<template>
  <!-- 权限管理 -->
  <div class="permission">
    <div class="permission-top">
      <div class="permission-top-title">权限管理</div>
      <div class="permission-top-con">
        <div class="permission-top-con-tabs">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick($event)">
            <el-tab-pane v-for="item in tabList" :key="item.id" :label="item.name" :name="item.id"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="permission-top-con-time">
          <p>
            更新时间<span>{{ updateTime }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="permission-con" v-loading="loading">
      <div class="permission-con-list">
        <div class="permission-con-list-btn" @click="savePowers">保存</div>
        <el-checkbox v-model="powerModel.checkAll" @change="handleCheckAllChange" class="checkAll"
          >全部选择</el-checkbox
        >
        <div class="checkbox-line"></div>
        <div class="permission-con-list-item" v-for="(item, index) in powerModel.powers" :key="item">
          <el-checkbox
            style="font-weight: bold"
            v-model="powerModel.checkAllObj['module' + index]"
            @change="handCheckAllObj(index, item.module)"
            :label="item.module"
            :key="item.module"
            >{{ item.module }}</el-checkbox
          >
          <div class="checkbox-line"></div>
          <el-checkbox-group
            v-model="powerModel.haveModulePowers['module' + index]"
            @change="handleCheckedPowerChange(index)"
          >
            <span class="permission-con-list-item-check" v-for="(ite, idx) in item.list" :key="ite">
              <el-checkbox :label="ite.code" :key="ite.code">{{ ite.name }}</el-checkbox>
            </span>
          </el-checkbox-group>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {ref, reactive, onMounted} from 'vue';
import {ElMessage} from 'element-plus';
import manageApi from '@/api/manage.ts';

const activeName = ref(2);
const tabList = ref([]);
const loading = ref(false);
const updateTime = ref('');

const powerModel = reactive({
  checkAll: false, // 全部选中
  checkAllObj: {}, // 选中一个类别所有权限,true of false
  powers: [], // 权限列表数据
  allPowers: [], // 所有权限集合
  modulePowers: {}, // 模块包含的权限代码
  haveModulePowers: {}, // 现在模块拥有的权限代码
  havePowers: [], // 用户已拥有的权限
});

// 用户切换
const handleClick = async (event) => {
  loading.value = true;
  activeName.value = event.props.name;
  await getPermissionCheckList();
  loading.value = false;
};

// 保存
const savePowers = async () => {
  let permissionsList = [];
  for (const key in powerModel.haveModulePowers) {
    permissionsList = permissionsList.concat(powerModel.haveModulePowers[key]);
  }
  const res = await manageApi.permissionSave({id: activeName.value, permissions: permissionsList});
  ElMessage.success(res.message);
  getPermissionList();
};

// 全选
const handleCheckAllChange = (val) => {
  if (val) {
    for (const key in powerModel.checkAllObj) {
      powerModel.haveModulePowers[key] = JSON.parse(JSON.stringify(powerModel.modulePowers[key]));
      powerModel.checkAllObj[key] = powerModel.haveModulePowers[key].length === powerModel.modulePowers[key].length;
    }
  } else {
    for (const key in powerModel.checkAllObj) {
      powerModel.haveModulePowers[key] = [];
      powerModel.checkAllObj[key] = powerModel.haveModulePowers[key].length === powerModel.modulePowers[key].length;
    }
  }
  powerModel.checkAll = getPowerSelecting();
};

// 选择模块
const handCheckAllObj = (index, name) => {
  if (powerModel.checkAllObj['module' + index]) {
    powerModel.haveModulePowers['module' + index] = JSON.parse(
      JSON.stringify(powerModel.modulePowers['module' + index]),
    );
  } else {
    powerModel.haveModulePowers['module' + index] = [];
  }
  powerModel.checkAll = getPowerSelecting();
};

// 选择权限
const handleCheckedPowerChange = (index) => {
  powerModel.checkAllObj['module' + index] =
    powerModel.haveModulePowers['module' + index].length === powerModel.modulePowers['module' + index].length;
};

// 选中拥有的权限
const selectPowers = () => {
  let temRoleDataPermissions = [];
  if (powerModel.havePowers.length) {
    temRoleDataPermissions = JSON.parse(powerModel.havePowers); // 获取到该用户已经拥有的权限
  }
  for (const i in powerModel.haveModulePowers) {
    powerModel.haveModulePowers[i] = [];
  }
  temRoleDataPermissions.forEach((item) => {
    for (const i in powerModel.modulePowers) {
      const isIndex = powerModel.modulePowers[i].indexOf(item);
      if (isIndex !== -1) {
        powerModel.haveModulePowers[i].push(item);
        break;
      }
    }
  });
  powerModel.checkAll = getPowerSelecting();
};

// 确实是否所有选项选中
const getPowerSelecting = () => {
  let powersLength = 0;
  for (const key in powerModel.checkAllObj) {
    powersLength += powerModel.haveModulePowers[key].length;
    powerModel.checkAllObj[key] = powerModel.haveModulePowers[key].length === powerModel.modulePowers[key].length;
  }
  return powersLength === powerModel.allPowers.length;
};

// 获取已有权限
const getPermissionCheckList = async () => {
  const res = await manageApi.permissionList();
  tabList.value = res.data;
  res.data.forEach((item) => {
    if (item.id === activeName.value) {
      powerModel.havePowers = item.permissions;
      updateTime.value = item.updated_at;
    }
  });
  selectPowers();
};

// 获取权限列表
const getPermissionList = async () => {
  loading.value = true;
  const res = await manageApi.permissionCheckList();
  powerModel.powers = res.data;
  // 权限数据处理
  for (const i in powerModel.powers) {
    powerModel.modulePowers['module' + i] = [];
    powerModel.haveModulePowers['module' + i] = [];
    powerModel.checkAllObj['module' + i] = false;
    powerModel.powers[i].list.forEach((item) => {
      powerModel.allPowers.push(item.code);
      powerModel.modulePowers['module' + i].push(item.code);
    });
  }
  await getPermissionCheckList();
  loading.value = false;
};

onMounted(() => {
  getPermissionList();
});
</script>
<style lang="scss" scoped>
.permission {
  width: 100%;
  height: 100%;
  background: #f1f1f1;
  padding-left: 29px;
  padding-top: 20px;
  box-sizing: border-box;
  &-top {
    width: 100%;
    height: 147px;
    background: #fff;
    overflow: hidden;
    &-title {
      margin: 20px 0 20px 30px;
      height: 28px;
      font-size: 18px;
      color: #999999;
      line-height: 28px;
    }
    &-con {
      display: flex;
      padding: 0 29px;
      display: flex;
      &-tabs {
        flex: 1;
        &:deep(.el-tabs__nav-wrap) {
          &::after {
            position: static !important;
          }
        }
        &:deep(.el-tabs__item) {
          color: #333333;
        }
        &:deep(.is-active) {
          color: #1182fb;
          font-weight: bold;
          font-size: 18px;
        }
        &:deep(.el-tabs__active-bar) {
          background: #1182fb;
          height: 4px;
        }
      }
      &-time {
        width: 250px;
        p {
          color: #999999;
          font-size: 13px;
        }
        span {
          color: #333333;
          padding-left: 18px;
        }
      }
    }
  }
  &-con {
    width: 100%;
    height: 82%;
    overflow-y: scroll;
    margin-top: 14px;
    background: #fff;
    box-sizing: border-box;
    padding: 30px;
    position: relative;
    &-list {
      &-btn {
        width: 98px;
        height: 36px;
        background: #1890ff;
        border-radius: 2px;
        border: 1px solid #1890ff;
        text-align: center;
        line-height: 36px;
        color: #fff;
        position: absolute;
        top: 26px;
        right: 32px;
        cursor: pointer;
      }
      .checkbox-line {
        margin-top: 15px;
        height: 2px;
        background: #dde2ef;
      }
      .is-checked {
        &:deep(.el-checkbox__label) {
          color: #3c4353;
        }
      }
      &-item {
        margin-top: 13px;
        padding-left: 48px;
        color: #3c4353;
        .el-checkbox-group {
          padding-left: 39px;
          margin-top: 15px;
        }
        &:deep(.el-checkbox__label) {
          color: #3c4353;
        }
        &-check {
          margin-right: 43px;
        }
      }
    }
  }
}
</style>
